import React, { useState,useEffect } from 'react';
import {
    Button,
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    TreeSelect,
} from 'antd';
const Myform = (props) => {
    const [form] = Form.useForm();
    useEffect(()=>{
        form.setFieldsValue(props.item)
    },[])
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
        if(props.title=="添加"){
            let obj = {
                id:new Date().getTime(),
                ...values,
            }
            props.data.push(obj)
        }else{

        }
        props.onCancel()
    };
    return (
        <Form
            form={form}
            onFinish={onFinish}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 14 }}
            layout="horizontal"
            style={{ maxWidth: 600 }}
        >
            <Form.Item label="用户名" name='name' rules={[{ required: true, message: '用户名不能为空' }]}>
                <Input />
            </Form.Item>
            <Form.Item label="角色" name='role' rules={[{ required: true, message: '角色不能为空' }]}>
                <Input />
            </Form.Item>
            <Form.Item label="简介" name='desc' rules={[{ required: true, message: '简介不能为空' }]}>
                <Input />
            </Form.Item>
            <Form.Item label="标签" name='tags' rules={[{ required: true, message: '请选择标签' }]}>
                <Radio.Group
                    options={[
                        { value: 1, label: '前端工程师' },
                        { value: 2, label: 'developer' },
                        { value: 3, label: 'Dooring' },
                    ]}
                />
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType="submit">确定</Button>
            </Form.Item>
        </Form>
    );
};

export default Myform;